<template>
  <div>
    <div class="page-header">
      <div class="left">
        <h3 class="page-title">编目管理</h3>
        <ul class="breadcrumb">
          <li class="breadcrumb-item">
            <router-link :to="{ path: '/' }">首页</router-link>
          </li>
          <li class="breadcrumb-item active">编目列表</li>
        </ul>
      </div>
      <div class="right" title="添加课程" @click="onAdd()">
        <el-icon style="margin: 5px 0;display:block;">
          <Plus/>
        </el-icon>
      </div>
    </div>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__fadeIn"
    >
      <el-card key="1">
        <el-form :inline="true">
          <el-form-item label="搜索">
            <el-input v-model="state.itemName" placeholder="请输入书名"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.search" clearable placeholder="请选择出版社">
              <el-option
                  v-for="item in state.publish"
                  :key="item.publish"
                  :label="item.publish"
                  :value="item.publish"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.sizeS" clearable placeholder="请选择文献尺寸">
              <el-option
                  v-for="item in state.docusize"
                  :key="item.size"
                  :label="item.size"
                  :value="item.size"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.languageS" clearable placeholder="请选择文献语种">
              <el-option
                  v-for="item in state.language"
                  :key="item.languages"
                  :label="item.languages"
                  :value="item.languages"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="state.typeS" clearable placeholder="请选择文献类型">
              <el-option
                  v-for="item in state.type"
                  :key="item.docuType"
                  :label="item.docuType"
                  :value="item.docuType"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="table-container" key="1">
          <el-table
              :data="handleSelect()"
              stripe
              style="width: 100%"
          >
            <el-table-column type="expand">
              <template #default="props">
                <el-descriptions title="">
                  <el-descriptions-item label="标题">{{ props.row.name }}</el-descriptions-item>
                  <el-descriptions-item label="作者">{{ props.row.author }}</el-descriptions-item>
                  <el-descriptions-item label="编目人">{{ props.row.cataloger }}</el-descriptions-item>
                  <el-descriptions-item label="编目号">{{ props.row.bkId }}</el-descriptions-item>
                  <el-descriptions-item label="页码">{{ props.row.pages }}页</el-descriptions-item>
                  <el-descriptions-item label="价格">{{ props.row.price }}元</el-descriptions-item>
                  <el-descriptions-item label="编目日期">{{ props.row.cataDate }}</el-descriptions-item>
                  <el-descriptions-item label="文献类型">{{ props.row.bkType }}</el-descriptions-item>
                  <el-descriptions-item label="出版社">{{ props.row.publish }}</el-descriptions-item>
                  <el-descriptions-item label="文献尺寸">{{ props.row.size }}</el-descriptions-item>
                  <el-descriptions-item label="文献语种">{{ props.row.language }}</el-descriptions-item>
                </el-descriptions>
              </template>
            </el-table-column>
            <el-table-column
                type="index"
                prop=""
                label=""
                :index="(index)=>{ return (pagination.currentPage-
1)*pagination.pageSize + index + 1 }"
                width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                label="书名"
                width="200">
            </el-table-column>
            <el-table-column
                prop="author"
                label="作者">
            </el-table-column>
            <el-table-column
                prop="publish"
                label="出版社">
            </el-table-column>
            <el-table-column
                prop="size"
                width="150"
                label="文献尺寸(cm)">
            </el-table-column>
            <el-table-column
                prop="bkType"
                label="文献类别">
            </el-table-column>
            <el-table-column
                prop="language"
                label="文献语种">
            </el-table-column>
            <el-table-column
                prop=""
                label="操作"
                align="center"
                width="150">
              <template #default="scope">
                <el-button size="small" plain
                           type="primary"
                           @click="onEdit(scope.$index)">&nbsp;修改
                </el-button>
                <el-popconfirm
                    title="确定删除该数据吗？"
                    @confirm="onDelete(scope.$index)"
                >
                  <template #reference>
                    <el-button size="small" plain
                               type="danger">&nbsp;删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @current-change="handleCurrentChange"
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :total="pagination.total"
              layout="total,prev, pager, next">
          </el-pagination>
        </div>
        <!--注册对话框-->
        <el-dialog
            width="50%"
            v-model="state.dialogAdd.show"
            :title="state.dialogAdd.title"
            :close-on-click-modal='false'
            :close-on-press-escape='false'
            :modal-append-to-body='false'
        >
          <!--使用el-form组件进行数据添加和修改-->
          <el-form
              ref="myformAdd"
              :model="state.mymodel"
              :rules="rules"
              label-width="150px"
              style="margin:10px;width:auto;">
            <el-form-item label="书名" prop='name'>
              <el-col :span="15">
                <el-input type="text" v-model="state.mymodel.name"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="作者" prop='author'>
              <el-col :span="15">
                <el-input type="text" v-model="state.mymodel.author"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="编目人" prop="cataloger">
              <el-col :span="15">
                <el-input type="string" v-model="state.mymodel.cataloger"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="编目号" prop="bkId">
              <el-col :span="15">
                <el-input type="number" v-model="state.mymodel.bkId"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="页码" prop="pages">
              <el-col :span="15">
                <el-form-item prop='pages'>
                  <el-input type="string" v-model="state.mymodel.pages"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-col :span="15">
                <el-input type="string" v-model="state.mymodel.price"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="编目日期" prop="cataDate">
              <el-col :span="15">
                <el-date-picker
                    v-model="state.mymodel.cataDate"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="文献类型" prop="bkType">
              <el-select v-model="state.mymodel.bkType" placeholder="请选择文献类型">
                <template v-for="item in state.type">
                  <el-option :label="item.name" :value="item.docuType"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="出版社" prop="publish">
              <el-select v-model="state.mymodel.publish" placeholder="请选择出版社">
                <template v-for="item in state.publish">
                  <el-option :label="item.name" :value="item.publish"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="文献尺寸" prop="size">
              <el-select v-model="state.mymodel.size" placeholder="请选择文献尺寸">
                <template v-for="item in state.docusize">
                  <el-option :label="item.name" :value="item.size"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="文献语种" prop="language">
              <el-select v-model="state.mymodel.language" placeholder="请选择文献语种">
                <template v-for="item in state.language">
                  <el-option :label="item.name" :value="item.languages"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item class="text_right">
              <el-button type="primary" @click='onAddSave(myformAdd)'>保 存</el-button>
              <el-button @click="state.dialogAdd.show = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--修改对话框-->
        <el-dialog
            width="50%"
            v-model="state.dialogEdit.show"
            :title="state.dialogEdit.title"
            :close-on-click-modal='false'
            :close-on-press-escape='false'
            :modal-append-to-body='false'>
          <!--使用el-form组件进行数据添加和修改-->
          <el-form
              ref="myformEdit"
              :model="state.mymodel"
              :rules="rules"
              label-width="150px"
              style="margin:10px;width:auto;">
            <el-form-item label="书名" prop='name'>
              <el-col :span="15">
                <el-input type="text" v-model="state.mymodel.name"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="作者" prop="author">
              <el-col :span="15">
                <el-input type="text" v-model="state.mymodel.author"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="编目人" prop="cataloger">
              <el-col :span="15">
                <el-input type="string" v-model="state.mymodel.cataloger"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="编目号" prop="bkId">
              <el-col :span="15">
                <el-input type="number" v-model="state.mymodel.bkId"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="页码" prop='pages'>
              <el-col :span="15">
                <el-input type="string" v-model="state.mymodel.pages"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-col :span="15">
                <el-input type="string" v-model="state.mymodel.price"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="编目日期" prop="cataDate">
              <el-col :span="15">
                <el-date-picker
                    v-model="state.mymodel.cataDate"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="文献类型" prop="bkType">
              <el-select v-model="state.mymodel.bkType" placeholder="请选择文献类型">
                <template v-for="item in state.type">
                  <el-option :label="item.name" :value="item.docuType"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="出版社" prop="publish">
              <el-select v-model="state.mymodel.publish" placeholder="请选择出版社">
                <template v-for="item in state.publish">
                  <el-option :label="item.name" :value="item.publish"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="文献尺寸" prop="size">
              <el-select v-model="state.mymodel.size" placeholder="请选择文献尺寸">
                <template v-for="item in state.docusize">
                  <el-option :label="item.name" :value="item.size"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="文献语种" prop="language">
              <el-select v-model="state.mymodel.language" placeholder="请选择文献语种">
                <template v-for="item in state.language">
                  <el-option :label="item.name" :value="item.languages"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item class="text_right">
              <el-button type="primary" @click='onEditSave(myformEdit)'>保 存</el-button>
              <el-button @click="state.dialogEdit.show = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </transition-group>
  </div>
</template>
<script setup>
//Vue3.x 组合式API写法
import {ref, reactive, onMounted} from "vue";
import {ElMessage} from 'element-plus';
import {del, get, post, put} from "@/utils/request"
//使用一个reactive方法让状态作为响应式对象
const state = reactive({
  list: [],
  mymodel: {
    id: '',
    name: "",
    author: "",
    publish: "",
    pages: '',
    price: '',
    cataloger: '',
    cataDate: '',
    bkId: '',
    bkType: '',
    size: '',
    language: '',
    bkAbstract: ''
  },
  dialogAdd: {
    title: '',
    show: false,
    option: ''
  },
  dialogEdit: {
    title: '',
    show: false,
    option: ''
  },
  item: {},
  selectedIndex: -1,
  // 语种
  language: [],
  type: [],
  publish: [],
  search: '',
  itemName: '',
  languageS: '',
  sizeS: '',
  typeS: '',
  docusize: []
})
const initData = async function () {
  state.language = await get('/language')
  state.type = await get('/bktype')
  state.publish = await get('/publish')
  state.docusize = await get('/docusize')
}
initData()
const rules = reactive({
  name: [
    {required: true, message: '请填写书名', trigger: 'blur'},
  ],
  author: [
    {required: true, message: '请填写作者', trigger: 'blur'},
  ],
  cataloger: [
    {required: true, message: '请填写编目人', trigger: 'blur'},
  ],
  bkId: [
    {required: true, message: '请填写编目号', trigger: 'blur'},
  ],
  pages: [
    {required: true, message: '请填写页码', trigger: 'blur'},
  ],
  price: [
    {required: true, message: '请填写价格', trigger: 'blur'},
  ],
  cataDate: [
    {required: true, message: '请选择日期', trigger: 'blur'},
  ],
  bkType: [
    {required: true, message: '请选择类型', trigger: 'blur'},
  ],
  publish: [
    {required: true, message: '请选择出版社', trigger: 'blur'},
  ],
  size: [
    {required: true, message: '请选择尺寸', trigger: 'blur'},
  ],
  language: [
    {required: true, message: '请选择语种', trigger: 'blur'},
  ],

})
const handleSelect = () => {
  const startIndex = (pagination.currentPage - 1) * pagination.pageSize;
  const endIndex = startIndex + pagination.pageSize;
  const filteredList = state.list.filter(item => {
    if (item.publish.includes(state.search) && item.name.includes(state.itemName) && item.language.includes(state.languageS) && item.size.includes(state.sizeS) && item.bkType.includes(state.typeS)) {
      // 字符串索引有关键字值,返回true
      return item
    }
  })
  pagination.total = filteredList.length;
  return filteredList.slice(startIndex, endIndex)
}
//翻页参数对象
const pagination = reactive({
  currentPage: 1, //当前页(默认第一页)
  pageSize: 10, //每页显示条目个数
  total: state.list.length, //总条目数
})
//生命周期钩子
onMounted(async () => {
  state.list = await get("/bookcata");
  pagination.total = state.list.length;
})
//响应注册按钮,打开注册对话框
const onAdd = () => {
//清空表单
  state.mymodel = {
    id: '',
    name: "",
    author: "",
    publish: "",
    pages: '',
    price: '',
    cataloger: '',
    cataDate: '',
    bkId: '',
    bkType: '',
    size: '',
    language: '',
    bkAbstract: ''
  }
//弹出注册对话框
  state.dialogAdd = {
    title: '添加图书',
    show: true,
    option: 'add'
  }
}
//响应注册对话框保存按钮
const myformAdd = ref();
const onAddSave = async (form) => {
  if (!form) return
  await form.validate(async valid => {
    if (valid) {
      const addUser = await post("/bookcata", state.mymodel)
      ElMessage({
        message: "保存成功！",
        type: "success"
      });
      //跟新表格
      state.list.push(addUser);
      pagination.total = state.list.length;
      //清空表单
      state.mymodel = {
        id: '',
        name: "",
        author: "",
        publish: "",
        pages: '',
        price: '',
        cataloger: '',
        cataDate: '',
        bkId: '',
        bkType: '',
        size: '',
        language: '',
        bkAbstract: ''
      }
      //关闭对话框
      state.dialogAdd = {
        title: '',
        show: false,
        option: ''
      }
    }
  })
}
//响应修改按钮,打开修改对话框
const onEdit = (index) => {
//获得要修改的信息
//由于进行了翻页,传进来的index为当前页的行索引,需要转换为数组索引
  let listIndex = (pagination.currentPage - 1) * pagination.pageSize + index
  let user = state.list[listIndex];
//临时保存选中的索引
  state.selectedIndex = listIndex;
//回填数据
  state.mymodel = {
    id: user.id,
    name: user.name,
    author: user.author,
    publish: user.publish,
    pages: user.pages,
    price: user.price,
    cataloger: user.cataloger,
    cataDate: user.cataDate,
    bkId: user.bkId,
    bkType: user.bkType,
    size: user.size,
    language: user.language,
    bkAbstract: user.bkAbstract
  }
//弹出注册对话框
  state.dialogEdit = {
    title: '修改信息',
    show: true,
    option: 'add'
  }
}
//响应修改对话框保存按钮
const myformEdit = ref()
const onEditSave = async (form) => {
  if (!form) return
  await form.validate(async valid => {
    if (valid) {
      const result = await put("/bookcata", state.mymodel)
      try {
        ElMessage({
          message: "保存成功！",
          type: "success"
        });
        //更新表格
        state.list.splice(state.selectedIndex, 1, result)
        //清空表单
        state.mymodel = {
          id: '',
          name: "",
          author: "",
          publish: "",
          pages: '',
          price: '',
          bookcaseid: '',
          abled: '',
          type: '',
          docusize: '',
          language: ''
        }
//重置selectedIndex
        state.selectedIndex = -1;
//关闭对话框
        state.dialogEdit = {
          title: '',
          show: false,
          option: ''
        }
      } catch (err) {
        ElMessage({
          message: "操作失败！",
          type: "error"
        });
      }
    }
  })
}
//响应删除按钮
const onDelete = async (index) => {
//删除被选中的数据
//由于进行了翻页,传进来的index为当前页的行索引,需要转换为数组索引
  let listIndex = (pagination.currentPage - 1) * pagination.pageSize + index
  //删除
  let id = state.list[listIndex].id;
  const result = await del(`/bookcata/${id}`)
  if (result === 200) {
    ElMessage("删除成功");
    // 删除table起始下标为1，长度为1的一个值
    state.list.splice(listIndex, 1);
    pagination.total = state.list.length;
  }
}
//表格翻页控制方法
const handleCurrentChange = (val) => {
  pagination.currentPage = val;
}
</script>
<style scoped>
.table-container {
  text-align: right;
}
</style>
